<template>
  <div v-init-screen-h="6" class="energy_alocation_content">
    <TimeZone
      ref="TimeZone"
      style="margin-bottom: 10px"
      @updata="getPriceList"
      :tableAllData="tableAllData"
    />
    <el-card class="">
      <div slot="header" class="clearfix">
        <el-row :gutter="20">
          <el-col :span="18"><span>费率管理</span></el-col>
          <el-col :span="4"
            ><el-date-picker
              v-model="relatedYear"
              style="width:100px;float: right;"
              size="mini"
              type="year"
              placeholder="选择年"
            >
            </el-date-picker
          ></el-col>
          <el-col :span="2"
            ><el-button size="mini" @click="getPriceList"
              >查询</el-button
            ></el-col
          >
        </el-row>
      </div>
      <el-table
        size="small"
        height="100px"
        v-adaptive="{
          bottomOffset: 0
        }"
        :data="tableData"
        border
        stripe
        ref="expandstable"
      >
        <el-table-column align="center" type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="label" label="时段">
          <template slot-scope="scope">
            <span v-if="scope.row.mardId === '0'">峰时区间</span>
            <span v-if="scope.row.mardId === '1'">谷时区间</span>
            <span v-if="scope.row.mardId === '2'">平时区间</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="startTime" label="开始时间">
        </el-table-column>
        <el-table-column align="center" prop="endTime" label="结束时间">
        </el-table-column>
        <el-table-column align="center" prop="createdDate" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createdDate | formatDate }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center"
                         prop="updataDate"
                         label="更新时间">
          <template slot-scope="scope">
            {{scope.row.updataDate|formatDate}}
          </template>
        </el-table-column> -->
        <el-table-column
          align="center"
          prop="electrovalenceUnitPrice"
          label="电单价"
        >
        </el-table-column>
        <el-table-column align="center" prop="unit" label="单位">
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope">
            元/Kw·h
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="230px">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="handleDel(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        @pagination="pagination"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :pageSizes.sync="pageSizes"
      />
    </el-card>
    <el-dialog title="编辑电价信息" :visible.sync="isEdit" width="500px">
      <el-form
        :model="saveRow"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
      >
        <el-form-item label="时段:" prop="mardId">
          <el-radio-group v-model="saveRow.mardId">
            <el-radio label="0">峰时区间</el-radio>
            <el-radio label="1">谷时区间</el-radio>
            <el-radio label="2">平时区间</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="时间:">
          <span>{{ saveRow.startTime }}~{{ saveRow.endTime }}</span>
        </el-form-item>
        <el-form-item label="电单价:" prop="electrovalenceUnitPrice">
          <!-- <el-input placeholder="请输入电单价"
                    v-model="saveRow.electrovalenceUnitPrice"
                    type="number"></el-input> -->
          <span>{{ saveRow.electrovalenceUnitPrice }}</span>
        </el-form-item>
        <el-form-item label="单位:">
          <span> 元/Kw·h</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/views/common/page";
import TimeZone from "./components/TimeZone.vue";
import { generateId } from "@/utils/index";
import { TYPES } from "./constent";
import {
  getElectrovalenceList,
  deleteElectrovalence,
  updateElectrovalence
} from "@/api/energyManage";
import _ from "lodash";
export default {
  components: {
    TimeZone,
    Pagination
  },
  data() {
    return {
      TYPES,
      tableData: [],
      tableAllData: [],
      relatedYear: "",
      total: 0,
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50],
      isEdit: false,
      saveRow: {},
      rules: {
        // electrovalenceUnitPrice: [
        //   { required: true, message: "请输入电单价", trigger: "blur" }
        // ],
        mardId: [{ required: true, message: "请选择时段", trigger: "change" }]
      }
    };
  },
  mounted() {
    let date = new Date();
    this.relatedYear = date;
    this.getPriceList();
  },
  methods: {
    getAllPriceList() {
      const params = {
        page: 1,
        pageSize: 0,
        relatedYear: this.relatedYear.getFullYear()
      };
      getElectrovalenceList(params).then(res => {
        this.tableAllData = res.data.results;
        this.$refs.TimeZone.drawColorBox(this.tableAllData);
      });
    },
    getPriceList() {
      const params = {
        page: this.pageNum,
        pageSize: this.pageSize,
        relatedYear: this.relatedYear.getFullYear()
      };
      getElectrovalenceList(params).then(res => {
        this.tableData = res.data.results;
        this.total = res.data.numResults;
        this.getAllPriceList();
      });
    },
    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.getPriceList();
    },
    //编辑
    handleEdit(row) {
      this.saveRow = _.cloneDeep(row);
      this.isEdit = true;
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          updateElectrovalence(this.saveRow, this.saveRow.token).then(res => {
            this.$msg({
              type: "success",
              message: "编辑成功"
            });
            this.getPriceList();
            this.handleClose();
          });
        } else {
          this.$msg({
            type: "warning",
            message: "请完善信息"
          });
        }
      });
    },
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.saveRow = {};
      this.isEdit = false;
    },
    //删除峰谷平信息表
    handleDel(row) {
      this.$confirm("确定删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteElectrovalence(row.token).then(res => {
            this.$msg({
              type: "success",
              message: "删除成功!"
            });
            this.getPriceList();
          });
        })
        .catch(err => {});
    }
  }
};
</script>

<style scoped lang="scss">
.energy_alocation_content {
  /* background-color: #fff; */
  /* padding: 10px; */
  /deep/ .el-card__header {
    border-bottom: 0;
  }
  /deep/ .el-card__body {
    padding: 0 30px;
  }
}
</style>
